<template>
  <el-row :gutter="20">
    <el-col v-for="(item,index) in prodList" :key="item.objectId" :span="6" :offset="0">
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <template #header>
        <div>
          <span>{{item.name}}</span>
        </div>
        </template>
        <el-image :src="'https://omsv2-static.fnji.com/'+item.picLeft" fit="fill" :lazy="true"></el-image>
        
        <template #footer>
          <el-tag type="primary" size="small"  effect="dark">
            {{ item.fnjiType==1?'家具':'家居' }}
          </el-tag>
          <el-tag type="success" size="small"  effect="dark">
            {{ item.category }}
          </el-tag>
        </template>
      </el-card>
    </el-col>
  </el-row>
  
</template>

<script setup>

import { ref } from 'vue';
import { productGet } from '../../api/product';

// 列表渲染
const prodList = ref([])
let res = await productGet()
console.log(res); 
prodList.value = res.data.results
</script>

<style lang="scss" scoped>
.el-col{
  margin-bottom: 20px;
}
</style>